<style>
.bg {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: .8;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

body {
	background-color: #fff;
}

.login-con {
	background-color: #fff !important;
	position: absolute;
	right: 160px;
	top: 50%;
	-webkit-transform: translateY(-60%);
	transform: translateY(-60%);
	width: 300px;
}
</style>
<div ng-controller="sysLoginCtl" class="bg"
	style="height: 100%; background-image: url(./img/login_bg.jpg)">
	<div class="login-con" id="login_card">
		<div class="ivu-card">
			<div class="ivu-card-head">
				<p>
					<i class="ivu-icon ivu-icon-log-in"></i> 欢迎登录
				</p>
			</div>

			<div class="ivu-card-body">
				<div class="form-con">
					<form autocomplete="off" class="ivu-form ivu-form-label-right">
						<div class="ivu-form-item ivu-form-item-required">

							<div class="ivu-form-item-content">
								<div
									class="ivu-input-wrapper ivu-input-type ivu-input-group ivu-input-group-with-prepend">
									<div class="ivu-input-group-prepend" style="">
										<span><i class="ivu-icon ivu-icon-person"
											style="font-size: 16px;"></i></span>
									</div>

									<i
										class="ivu-icon ivu-icon-load-c ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
									<input autocomplete="off" spellcheck="false" type="text"
										placeholder="请输入用户名" class="ivu-input" ng-model="user.user">

								</div>

							</div>
						</div>
						<div class="ivu-form-item ivu-form-item-required">

							<div class="ivu-form-item-content">
								<div
									class="ivu-input-wrapper ivu-input-type ivu-input-group ivu-input-group-with-prepend">
									<div class="ivu-input-group-prepend" style="">
										<span><i class="ivu-icon ivu-icon-locked"
											style="font-size: 14px;"></i></span>
									</div>

									<i
										class="ivu-icon ivu-icon-load-c ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
									<input autocomplete="off" spellcheck="false" type="password"
										placeholder="请输入密码" class="ivu-input" ng-model="user.pwd">

								</div>

							</div>
						</div>
						<div class="ivu-form-item">

							<div class="ivu-form-item-content">
								<button type="button" ng-click="login()"
									class="ivu-btn ivu-btn-primary ivu-btn-long">

									<span>登录</span>
								</button>

							</div>
						</div>
					</form>

				</div>
			</div>
		</div>
	</div>
</div>

<script>
	var w = document.documentElement.clientWidth;
	var ew = $("#login_card").width();
	var eyd = (w - ew) / 2;
	//console.log(w);
	if (w < 778) {
		$("#login_card").animate({
			left : eyd + 'px'
		});
	}
</script>
